<template>
  <div
    id="gaugeChart"
    ref="gaugeChart"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, ref } from "vue";

const gaugeChart = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});
// 线性表的配置项
const option = ref<EChartsOption>({
  tooltip: {
    formatter: "{a} <br/>{b} : {c}%",
  },
  series: [
    {
      name: "Pressure",
      type: "gauge",
      detail: {
        formatter: "{value}",
      },
      data: [
        {
          value: 50,
          name: "SCORE",
        },
      ],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(gaugeChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onMounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
